Mermaid diagrams are supported in Congo using the mermaid shortcode. Simply wrap the diagram markup within the shortcode. Congo automatically themes Mermaid diagrams to match the configured colorScheme parameter.
Refer to the mermaid shortcode docs for more details.
The examples below are a small selection taken from the official Mermaid docs . You can also view the page source on GitHub to see the markup.
Flowchart #
Section
Get money
One
Two
Three
Let me think
Laptop
iPhone
Car
Another
Christmas
Go shopping
Sequence diagram #
Alice John Bob par [Action 1] [Action 2] John is perceptive loop [Every minute] Hello John, how are you? 1 Hello Bob, how are you? 2 Hello John, how are you? 3 John, can you hear me? 4 Hi Alice, I can hear you! 5 I feel great! 6 Great! 7 Alice John Bob Class diagram #
1
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
Entity relationship diagram #
CUSTOMER DELIVERY-ADDRESS ORDER INVOICE ORDER-ITEM PRODUCT-CATEGORY PRODUCT has places liable for receives covers includes contains ordered in